<template>
  <div class="goods">
    <el-input
      v-model="selectText"
      prefix-icon="el-icon-search"
      placeholder="请输入商品名称"
      @keyup.enter.native="queryBtn"
    ></el-input>

    <el-row class="row">
      <div class="buttonGroup">
        <el-button class="buttons" type="primary" @click="queryBtn"
          >查询</el-button
        >
        <el-button class="buttons" type="success" @click="addBtn"
          >添加</el-button
        >
        <el-button class="buttons" type="info" @click="removeBatch"
          >批量删除
        </el-button>
      </div>
    </el-row>

    <!-- 新增/编辑的弹框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="editedItem"
        :rules="rules"
        ref="productDialog"
        label-width="100px"
      >
        <el-form-item label="入库日期" prop="inDate">
          <el-col :span="11">
            <el-date-picker
              type="datetime"
              v-model="editedItem.inDate"
              style="width: 100%"
              :default-value="new Date()"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="inDateOptions"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="商品编号" prop="code">
          <el-col :span="15"
            ><el-input v-model="editedItem.code"></el-input
          ></el-col>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-col :span="15"
            ><el-input v-model="editedItem.name"></el-input
          ></el-col>
        </el-form-item>
        <el-form-item label="产地" prop="address">
          <el-col :span="15"
            ><el-input v-model="editedItem.address"></el-input
          ></el-col>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="saveProduct">确 定</el-button>
      </div>
    </el-dialog>

    <el-table
      :data="productList.slice((pagination.currentPage-1)*pagination.pageSize, pagination.pageSize*pagination.currentPage)"
      :stripe="true"
      ref="productTable"
      style="width: 100%"
      @select-all="selectAll"
      @select="select"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="inDate" label="入库日期" width="200">
      </el-table-column>
      <el-table-column prop="code" label="商品编号" width="120">
      </el-table-column>
      <el-table-column prop="name" label="商品名称" width="120">
      </el-table-column>
      <el-table-column prop="address" label="产地" show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="editBtn(scope.row, scope.$index)"
            class="el-button"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="removeBtn(scope.row, scope.$index)"
            class="el-button"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
    :page-count=5
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pagination.currentPage"
      :page-sizes="[2, 3, 5, 8]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      class="pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      selectText: "", // 搜索内容
      dialogVisible: false, // 新增、编辑弹框可见性
      selections: [], // 勾选中的行数据
      dialogTitle: "",
      productList: [
        {
          id: 1,
          inDate: "2022-03-03 12:20:35",
          code: "cd20210901",
          name: "康师傅方便面",
          address: "上海市普陀区金沙江路",
        },
        {
          id: 2,
          inDate: "2022-02-23 13:20:35",
          code: "cd20210902",
          name: "大地方便面",
          address: "成都市普陀区金沙江路",
        },
        {
          id: 3,
          inDate: "2022-03-05 11:20:35",
          code: "cd20210903",
          name: "刘师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          id: 4,
          inDate: "2022-03-20 14:20:35",
          code: "cd20210904",
          name: "李师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          id: 5,
          inDate: "2022-02-23 17:20:35",
          code: "cd20210905",
          name: "大地方便面",
          address: "成都市普陀区金沙江路",
        },
        {
          id: 6,
          inDate: "2022-03-05",
          code: "cd20210906",
          name: "刘师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          id: 7,
          inDate: "2022-03-20",
          code: "cd20210907",
          name: "李师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          id: 8,
          inDate: "2022-03-20",
          code: "cd20210908",
          name: "李师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          id: 9,
          inDate: "2022-03-05",
          code: "cd20210906",
          name: "刘师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          id: 10,
          inDate: "2022-03-20",
          code: "cd20210907",
          name: "李师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
        {
          id: 11,
          inDate: "2022-03-20",
          code: "cd20210908",
          name: "李师傅方便面",
          address: "长沙市普陀区金沙江路",
        },
      ],
      inDateOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      rules: {
        inDate: [
          {
            type: "datetime",
            required: true,
            message: "请选择日期",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "请输入商品编号", trigger: "blur" }],
        address: [{ required: true, message: "请输入产地", trigger: "blur" }],
      },

      editedIndex: -1, // 判断编辑或新增的标志位
      // 编辑,新增时候的product对象(中间对象)
      editedItem: {
        id: "", // 数据库存的id
        code: "", // 商品编号
        name: "",
        inDate: "",
        address: "",
      },
      // 默认数据,用于一些操作后的初始化,比如 保存,取消
      defaultItem: {
        id: -1,
        name: "",
        code: "",
        inDate: "",
        address: "",
      },
      pagination: {
        total: -1, // 总数
        pageSize: 2,// 每页支持条数
        currentPage: 1,// 当前页
      },
    };
  },
  created() {
    this.initialize();
  },
  methods: {
    initialize() {
      this.pagination.total = this.productList.length;
    },
    // 单选
    select(item) {
      this.selections = item;
    },

    // 全选
    selectAll(item) {
      this.selections = item;
    },

    // 关闭弹窗时的统一初始化操作
    close() {
      this.dialogVisible = false;
      this.editedIndex = -1;
      this.editedItem = Object.assign({}, this.defaultItem);
    },

    // 处理点击弹窗外时关闭弹框事件
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.close();
        })
        .catch((_) => {});
    },

    queryBtn() {
      let str = this.selectText.trim();
      // TODO 发送请求，查询，然后返回数据，界面展示;
      console.log("test--模拟后台查询==" + str + "==");
      this.selectText = "";
    },

    addBtn() {
      this.dialogTitle = "新增商品";
      this.dialogVisible = true;
    },

    editBtn(item, index) {
      this.dialogTitle = "修改信息";
      this.dialogVisible = true;
      this.editedIndex = index; // 获取行号,设置标志位,大于-1,即更新操作。
      this.editedItem = Object.assign({}, item); // 赋值给中间对象,用于展示在修改弹框中的数据;
    },

    // 新增弹出框的确认按钮
    saveProduct() {
      if (
        !this.editedItem.inDate ||
        !this.editedItem.code.trim() ||
        !this.editedItem.name.trim() ||
        !this.editedItem.address.trim()
      ) {
        this.$confirm("输入不能为空")
          .then((_) => {
            return done();
          })
          .catch((_) => {});
      } else {
        // this.editedIndex > -1 表示修改,否则保存
        if (this.editedIndex > -1) {
          console.log(this.editedItem.inDate);
          console.log("test--正在修改产品" + JSON.stringify(this.editedItem));
          // TODO 发送请求,保存修改的数据
          this.productList.splice(this.editedIndex, 1, this.editedItem);
        } else {
          console.log(this.editedItem.inDate);
          console.log("test--确定保存产品" + JSON.stringify(this.editedItem));
          this.productList.push(this.editedItem);
          // TODO 发送请求,保存数据
        }
        this.initialize();
        this.close();
      }
    },

    // 单个删除,这里 item 即使没有用,也要写上
    removeBtn(item, index) {
      this.editedIndex = index;
      this.productList.splice(this.editedIndex, 1);
      // TODO 发送请求，删除单个。删除单个的时候给一个提示。
      console.log("test--单个删除");

      this.editedIndex = -1;
      this.selections = [];
      this.initialize();
    },

    // 批量删除按钮,this.selections 是被选中的集合,删除这个集合就行了
    removeBatch() {
      // 相当于是在 productList 中过滤掉 selections 中存在的项目,这里要取反。filter：true,进行保存,false,丢弃
      let tmp = this.productList.filter((i) => !this.selections.includes(i));
      this.productList = tmp; // 前端展示数据

      console.log("要删除的项目", this.selections);
      console.log("test--模拟后端批量删除");
      // TODO 前端批量删除完成之后,抽取出 deleteTmp 中的id打包发送后台删除。或者取出一个id,请求删除一次。

      this.selections = []; // 重置数据
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;

      let productList = this.productList;
      let pageSize = this.pagination.pageSize;
      let currentPage = this.pagination.currentPage;
      console.log("第几页", val);
      console.log(productList.slice((currentPage-1)*pageSize, pageSize*currentPage));
    },
    handleSizeChange(val){
      this.pagination.pageSize = val;
      console.log("1页几个",val);
    }
  },
};
</script>

<style lang="scss" scoped>
.goods {
  display: flex;
  flex-direction: column;
  .row {
    display: flex;
    flex-direction: row;
  }
  .serch {
    width: 55%;
    margin-right: 1%;
  }
  .pagination {
    //样式需要调整
    display: flex;
    justify-content: center;
    margin-top: 2%;
  }
}
</style>
